<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>熊猫优选</title>
    <link rel="stylesheet" href="css/index.css">
    <link rel="stylesheet" href="iconfont/font_0vxdlank86vc/iconfont.css">
</head>

<body>
    <div class="main">
        <div class="appbox">
            <div id="app-pc">
                <!-- 头部
                    logo，搜索
                -->
                <header class="baseHeader">
                    <div class="wrapper">
                        <!-- logo -->
                        <section class="logo">
                            <a href="#" title="返回首页">
                                <img src="images/logo.png" alt="logo">
                                <div class="right">
                                    <h3>熊猫优选</h3>
                                    <span>xiongmaoyouxuan</span>
                                </div>
                            </a>
                        </section>
                        <!-- 搜索 -->
                        <section class="wrapper-search">
                            <div class="search">
                                <img src="images/search.png" alt="搜索">
                                <input type="text" placeholder="搜索商品，发现更多优惠">
                                <div class="btn">搜索</div>
                            </div>
                        </section>

                        <!-- 退换，品质，包邮 -->
                        <section class="advantage">
                            <ul>
                                <li>
                                    <img src="images/quanchenbaoyou.png" alt="全程包邮">
                                    <span>全程包邮</span>
                                </li>
                                <li>
                                    <img src="images/qitiantuihuan.png" alt="七天退换">
                                    <span>七天退换</span>
                                </li>
                                <li>
                                    <img src="images/pinzhibaozheng.png" alt="品质保证">
                                    <span>品质保证</span>
                                </li>
                            </ul>
                        </section>
                    </div>
                </header>

                <!-- 导航tab -->
                <div class="tab" >
                    <div class="normal">
                        <ul>
                            <li class="active">首页</li>
                            <li>9块9包邮</li>
                            <li>超值大额券</li>
                            <li>夏季女装上新</li>
                        </ul>
                    </div>
                </div>

                <!-- 轮播，详情列表-->
                <div class="pc-view">
                    <div class="home">
                        <!-- 列表，轮播，扫码下载app -->
                        <div class="indexBanner">
                            <!-- 选项列表 -->
                            <section class="sidebar">
                                <div class="classification">
                                    <ul>
                                        <li>
                                            <div class="classificationItem">
                                                <span class="iconfont icon-shishangnvzhuang"></span>
                                                <p>女装
                                                </p>
                                                <span>/</span>
                                                <p>
                                                    女鞋
                                                </p>
                                            </div>
                                            <!-- 鼠标移入显示列表 -->
                                            <div class="sidebar-panel">
                                                <div class="sidebar-panel-item">
                                                    <h3>女装</h3>
                                                    <ul>
                                                        <li>本周上新</li>
                                                        <li>本周上新</li>
                                                        <li>本周上新</li>
                                                        <li>本周上新</li>
                                                        <li>本周上新</li>
                                                    </ul>
                                                </div>
                                                <div class="sidebar-panel-item">
                                                    <h3>女鞋</h3>
                                                    <ul>
                                                        <li>帆布鞋</li>
                                                        <li>帆布鞋</li>
                                                        <li>帆布鞋</li>
                                                        <li>帆布鞋</li>
                                                        <li>帆布鞋</li>
                                                    </ul>
                                                </div>
                                            </div>
                                        </li>
                                        <li>
                                            <div class="classificationItem">
                                                <span class="iconfont icon-dfdf05"></span>
                                                <p>男装</p>
                                                <span>/</span>
                                                <p>
                                                    男鞋
                                                </p>
                                            </div>
                                        </li>
                                        <li>
                                            <div class="classificationItem">
                                                <span class="iconfont icon-meizhuanggehu"></span>
                                                <p>美妆</p>
                                                <span>/</span>
                                                <p>
                                                    个护
                                                </p>
                                            </div>
                                        </li>
                                        <li>
                                            <div class="classificationItem">
                                                <span class="iconfont icon-xiexiangbao"></span>
                                                <p>配饰</p>
                                                <span>/</span>
                                                <p>
                                                    箱包
                                                </p>
                                            </div>
                                        </li>
                                        <li>
                                            <div class="classificationItem">
                                                <span class="iconfont icon-lingshi"></span>
                                                <p>零食王国</p>
                                            </div>
                                        </li>
                                        <li>
                                            <div class="classificationItem">
                                                <span class="iconfont icon-muying"></span>
                                                <p>母婴用品</p>
                                            </div>
                                        </li>
                                        <li>
                                            <div class="classificationItem">
                                                <span class="iconfont icon-shoujishuma"></span>
                                                <p>手机</p>
                                                <span>/</span>
                                                <p>
                                                    数码
                                                </p>
                                            </div>
                                        </li>
                                        <li>
                                            <div class="classificationItem">
                                                <span class="iconfont icon-25"></span>
                                                <p>内衣袜子</p>
                                            </div>
                                        </li>
                                        <li>
                                            <div class="classificationItem">
                                                <span class="iconfont icon-shafa"></span>
                                                <p>文娱</p>
                                                <span>/</span>
                                                <p>
                                                    家居
                                                </p>
                                            </div>
                                        </li>
                                    </ul>
                                </div>
                            </section>
                            <!-- 轮播 -->
                            <section class="banner-container">
                                <div class="banner-container-top">
                                    <div class="slider">
                                        <div class="slider-item">
                                            <img src="images/banner.jpeg" alt="banner">
                                        </div>
                                    </div>
                                    <div class="banner-container-top-right">
                                        <h3>9块9包邮</h3>
                                        <div class="prompt">保你不吃亏</div>
                                        <img src="images/banner-right.gif" alt="banner-right">
                                    </div>
                                </div>
                                <div class="banner-container-bottom">
                                    <div class="banner-container-bottom-special">
                                        <h3>夏季女装上新</h3>
                                        <p>速来抢购~</p>
                                        <span class="btn">go</span>
                                        <img src="images/banner-container-bottom-special1.png" alt="专题图">
                                    </div>
                                    <div class="banner-container-bottom-special">
                                        <h3>夏季女装上新</h3>
                                        <p>速来抢购~</p>
                                        <span class="btn">go</span>
                                        <img src="images/banner-container-bottom-special2.png" alt="专题图">
                                    </div>
                                    <a href="#" target="_blank" class="banner-container-bottom-QRCode">
                                        <P>扫码下载app</P>
                                        <p>发现更多惊喜</p>
                                        <img src="images/banner-bottom-downloadcode.png" alt="下载码">
                                    </a>
                                </div>
                            </section>

                        </div>

                        <!-- 小编精选 -->
                        <div class="title-bar">
                            <h3>小编精选</h3>
                            <p class="title-bar-prompt">每天更新</p>
                        </div>

                        <!-- 精选列表 -->
                        <section class="choice">
                            <ul class="base-commodity-list">
                               <!-- 动态加载数据 -->
                            </ul>
                            <!-- 查看更多 -->
                            <div class="choice-more">
                                <div class="choice-more-btn">查看更多</div>
                                <ul class="base-commodity-list-more">
                                    
                                </ul>
                            </div>
                        </section>
                    </div>
                </div>

                <!-- 回到顶部 -->
                <div class="back-top">
                    <img src="images/Backtotop.png" alt="返回顶部" class="top">
                </div>

                <!-- 底部 -->
                <footer class="footer">
                    <div class="base-footer">
                        <div class="container">
                            <img src="images/20170808-164221.jpeg" alt="底部" class="yx-icon">
                            <div class="content">
                                <h1 class="title">熊猫优选</h1>
                                <p class="slogan">
                                    年轻人网购首选<br/>购物领券更省钱
                                </p>
                            </div>
                            <div class="about-us">
                                <p class="items">
                                    <span class="line">|</span>
                                    <a href="#/download" target="_blank" class="item">下载app</a>
                                </p>
                            </div>
                            <!-- 公安备案 -->
                            <div class="footer">
                                <img src="images/policeIcon.png" alt="公安备案" class="police-icon">
                                <p class="msg">
                                    <span>浙公安网备案 33010602009949号 | </span>
                                    ICP备案号:
                                    <a href="https://beian.miit.gov.cn/" style="color: rgb(255, 255, 255);" >浙ICP备17012864号-1</a>
                                    |
                                </p>
                                <img src="images/license.png" alt="电子营业" class="police-icon">
                                <p class="msg">
                                    <a href="images/license.png" style="color: rgb(255, 255, 255);">证照信息</a>
                                </p>
                            </div>
                        </div>
                    </div>
                </footer>
            </div>
        </div>


        <div class="skeleton">
        </div>
    </div>

<script src="js/jquery-3.6.0.js"></script>    
<script src="js/index.js"></script>
</body>

</html>